<template>
  <div class="page-box">
    <!-- 搜索栏 -->
    <search @searchCallBack="submitter_list" ref="seachFrom" :searchField="searchField" />
    <!-- 操作部分 -->
    <div class="operation-box cenBet">
      <div class="operation-left">
        <el-button type="text">共计<span>{{tablePaginationQuery.total}}</span>人</el-button>
      </div>
      <div class="operation-right">
        <el-button @click="performance_expExcel()" icon="el-icon-download">导出</el-button>
      </div>
    </div>
    <!-- 表格 -->
    <el-table @selection-change="tableComChange" :data="tableData" v-loading="tableLoading" max-height="780" element-loading-text="数据加载中..." border>
      <el-table-column fixed='left' type="selection" align="center" width="60" />
      <el-table-column prop="type" label="提交类型" width="160px" align="center" fit>
        <template slot-scope="scope">
          <div v-if="scope.row.type==1">
            考核
          </div>
          <div v-else-if="scope.row.type==2">
            评分
          </div>
          <div v-else>
            考核/评分
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="user_name" label="姓名" align="center" fit></el-table-column>
      <el-table-column prop="dept_name" label="部门名称" align="center" fit></el-table-column>
      <el-table-column prop="is_submit" width="120px" label="是否提交" align="center" fit>
        <template slot-scope="scope">
          <el-tag v-if="scope.row.is_submit== 'Y'" type="success"> 已提交 </el-tag>
          <el-tag v-if="scope.row.is_submit== 'N'" type="danger"> 未提交 </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="timeName" label="考核季度" align="center" fit></el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination @paginationCallBack="submitter_list" v-if="tablePaginationQuery.total" :query="tablePaginationQuery" />

  </div>
</template>
<script>
import submissionInfoSearch from "@/components/publicData/submissionInfoSearch.js"; //搜索字段
import search from "@/components/search"; //搜索组件
import pagination from "@/components/pagination"; //分页组件
import service from "@/api";
import { leadOutExcel } from "@/components/publicJs/leadOutExcel/index.js"; //导出excel
export default {
  components: { search, pagination },
  data() {
    return {
      tablePaginationQuery: { start: 0, limit: 10, total: 0, current: 1 }, //表格分页参数
      tableLoading: false,
      tableData: [], //表格数据
      tableSelection: [], //表格的选项
      searchField: JSON.parse(JSON.stringify(submissionInfoSearch)) //搜索字段
    };
  },
  mounted() {
    this.submitter_list();
    this.quarter_list();
  },
  methods: {
    async quarter_list() {
      const { data = {} } = await service.quarter_list({
        start: 0,
        limit: 1000,
        current: 1
      });
      this.searchField.map(item => {
        if (item.attribute.labelKey == "id") {
          item.attribute.selectLsit = [];
          if (data.rows.length) {
            data.rows.map(row => {
              let start_date = this.$moment(
                new Date(row.start_date).getTime(),
                "YYYY-MM"
              );
              let end_date = this.$moment(
                new Date(row.end_date).getTime(),
                "YYYY-MM"
              );
              item.attribute.selectLsit.push({
                label: `${start_date}至${end_date} ${row.name}`,
                value: row.id
              });
            });
          }
        }
      });
    },
    // 表格选中值
    tableComChange(val) {
      this.tableSelection = val;
    },
    // 导出
    async performance_expExcel() {
      if (!this.tableSelection.length) {
        this.$message({
          message: "请至少选择一项",
          type: "warning"
        });
        return;
      }
      let table = [];
      this.tableSelection.map(item => {
        let obj = {
          ...item
        };
        if (item.type == "1") {
          obj.type = "考核";
        } else if (item.type == "2") {
          obj.type = "评分";
        } else {
          obj.type = "考核/评分";
        }
        if (item.is_submit == "Y") {
          obj.is_submit = "已提交";
        } else {
          obj.is_submit = "未提交";
        }
        table.push(obj);
      });
      const res = await leadOutExcel(
        ["提交类型", "姓名", "部门名称", "是否提交", "考核季度"],
        ["type", "user_name", "dept_name", "is_submit", "timeName"],
        table,
        "考核"
      );
    },
    async submitter_list() {
      let searchForm = {
        // 搜索字段
        ...this.$refs.seachFrom.searchForm
      };
      console.log(searchForm);
      const { start, limit, current } = this.tablePaginationQuery;
      this.tableLoading = true;
      const { data = {} } = await service.submitter_list({
        start,
        limit,
        current,
        ...searchForm
      });
      this.tableLoading = false;
      this.tablePaginationQuery.total = data.results || 0;
      this.tableData = [];
      if (data.rows.length) {
        data.rows.map(item => {
          let start_date = this.$moment(
            new Date(item.start_date).getTime(),
            "YYYY-MM"
          );
          let end_date = this.$moment(
            new Date(item.end_date).getTime(),
            "YYYY-MM"
          );
          this.tableData.push({
            ...item,
            timeName: `${start_date}至${end_date} ${item.name}`
          });
        });
      }
    }
  }
};
</script>